<template>
  <v-container class="grey lighten-5" style="width: 100%;" fluid>
    <v-row style="margin-bottom: 50px" no-gutters justify="center">
      <v-col>
<!--        <Legend @draw="draw" v-if="Object.keys(stuList).length > 0"></Legend>-->
<!--        <v-divider></v-divider>-->
        <StuSelector @draw="draw" v-if="stuListTmp.length > 0"></StuSelector>
        <div v-if="Object.keys(allLineX).length > 0" style="margin-left: 45px; margin-bottom: -70px; margin-top: 10px">
          <v-checkbox
              @click="click"
              v-model="showStandardflag"
              label="仅显示标准轨迹"
          ></v-checkbox>
        </div>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="5" >
        <line3D ref="Line3DContainer" v-if="Object.keys(allLineX).length > 0" style="margin: 0 auto;" />
      </v-col>
      <v-col cols="7" >
        <PolarCT ref="PolarCTContainer" style="margin: 0 auto;"/>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
// @ is an alias to /src
// import ChartTest from '@/components/ChartTest.vue'
import PolarCT from '@/components/PolarCT.vue'
import Test from "@/components/Test"
import line3D from "@/components/line3D";
import Legend from "@/components/Legend";
import StuSelector from "@/components/StuSelector";

import APIHelper, {stuName, color} from '../util/APIHelper'

export default {
  name: 'Home',
  components: {
    line3D, PolarCT, StuSelector
  },
  data () {
    return {
      showStandardflag: false,
      stu: {},
    }
  },
  computed: {
    onlyShowStandard() {
      return this.$store.state.onlyShowStandard
    },
    stuStartIdx() {
      return this.$store.state.stuStartIdx
    },
    points() {
      return this.$store.state.points
    },
    maxErr() {
      return this.$store.state.maxErr
    },
    errs() {
      return this.$store.state.errs
    },
    selectedList() {
      return this.$store.state.selectedList
    },
    stuList() {
      return this.$store.state.stuList
    },
    opt() {
      return this.$store.state.opt
    },
    preOpt() {
      return this.$store.state.preOpt
    },
    trajectoryColor() {
      return this.$store.state.trajectoryColor
    },
    trajectoryX() {
      return this.$store.state.trajectoryX
    },
    trajectoryY() {
      return this.$store.state.trajectoryY
    },
    trajectoryZ() {
      return this.$store.state.trajectoryZ
    },
    preColor() {
      return this.$store.state.preColor
    },
    allLineX() {
      return this.$store.state.allLineX
    },
    allLineY() {
      return this.$store.state.allLineY
    },
    allLineZ() {
      return this.$store.state.allLineZ
    },
    stuListTmp() {
      return this.$store.state.stuListTmp
    },
  },
  created() {
    let that = this
    APIHelper.getTrajectory().then(result=>{
      that.$store.commit('setPoints', result.allPoints)
      that.$store.commit('setMaxErr', result.maxErr)
      that.$store.commit('setErrs', result.allErrs)
      that.$store.commit('setStuList', result.stuList)
      that.$store.commit('setStuStartIdx', result.stuStartIdx)
      // let selectedList = {}
      // for(let key in that.stuList){
      //   selectedList[key] = []
      // }
      // that.$store.commit('setSelectedList', selectedList)
    })
    APIHelper.getTrajectoryXYZ().then(result=>{
      that.$store.commit('setAllLineX', result.x)
      that.$store.commit('setAllLineY', result.y)
      that.$store.commit('setAllLineZ', result.z)
      // console.log('AllLineX', that.allLineX)
    })

    APIHelper.getMockStaticData().then(result=>{
      that.$store.commit('setStuListTmp', result.StuList)
    })
  },
  methods:{
    draw() {
      let that = this
      that.$refs.PolarCTContainer.updateCT()
      that.$refs.Line3DContainer.updateLine()
    },
    click() {
      let that = this
      that.$store.commit('setOnlyShowStandard', that.showStandardflag)
      that.$refs.Line3DContainer.updateLine()
    }
  }

}
</script>
